<template>
  <div class="">
    <el-row :gutter="60">
      <el-col :span="12">
        <BarChart
        :time="time" 
        :multi="true"
        title="应用统计" 
        series1Name="应用总数"
        series2Name="新增应用数"
        :xAxisData="appChartX"
        :chartData="appChartData"
        :chart2Data="appChart2Data"
      />
      </el-col>
      <el-col :span="12">
        <BarChart :time="time" title="服务累计调用次数" series1Name="累计调用次数" :xAxisData="svcChartX"
          :chartData="svcChartData" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent, watch, computed, ref, reactive } from "vue";
import {
  getAreaAppData,
  getSvcAreaInvoke,
} from "@/api/statistics";
import BarChart from '../components/BarChart.vue'
export default defineComponent({
  name: "AreaGroup",
  props: {
    time: { // 时间
      type: Object,
      default: () => {}
    },
  },
  components: { BarChart },
  setup(props, { emit }) {
 
    watch(() => props.time, (val) => {
      init()
    })

    const init = async () => {
      const startDate = props.time?.startDate
      const endDate = props.time?.endDate
      const para = {
        endDate,
        startDate
      }
      getAppData(para)
      getSvcData(para)
    }
    const appChartData = ref([])
    const appChart2Data = ref([])
    const appChartX = ref([])

    const getAppData = async (params) => {
      const res = await getAreaAppData(params)
      if (res.status == 200) {
        appChartData.value = res.data.y2
        appChart2Data.value = res.data.y
        const xAxis = []
        res.data.x.map(item => {
           xAxis.push(item.substring(0,2))
        })
        appChartX.value = xAxis
        console.log(appChartData.value, appChart2Data.value)
      }
    }
    const svcChartData = ref([])
    const svcChartX = ref([])
    const getSvcData = async (params) => {
      const res = await getSvcAreaInvoke(params)
      if (res.status == 200) {
        svcChartData.value = res.data.y
        const xAxis = []
        res.data.x &&res.data.x.map(item => {
           xAxis.push(item.substring(0,2))
        })
        svcChartX.value = xAxis
      }
    }
    return {
      svcChartData,
      svcChartX,
      appChartData,
      appChart2Data,
      appChartX
    };
  },
});
</script>


